<template>
    <div class="salesOrder">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData' ref='dynamicForm'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
                        @click="$router.push('/productionManagement/assembleOrder/create')">创建装配工单</el-button>
                    <el-button type="text" size="mini" icon="el-icon-printer"
                        @click="$refs.excelMouldPrint.initMould()" :disabled='isBatchCheck'>批量打印</el-button>
                    <my-button type="text" size="mini" icon="el-icon-edit-outline"
                        @btnClick="$refs.editMould.initMould()">编辑打印模版
                    </my-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'></pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 编辑打印模板 -->
        <editMould :belongModule="3" :defaultLength="1" ref="editMould"></editMould>

        <!-- excel打印模板 -->
        <excelMouldPrint :belongModule="3" :assemblyIds="ids" ref="excelMouldPrint"></excelMouldPrint>

        <!-- 表格 -->
        <table-list ref='tableList' :searchForm="formDataList.searchForm" :tableGroup="tableGroup"
            @getCheckedId='getCheckedId'></table-list>
    </div>
</template>

<script>
    import {
        productColumns
    } from '@/api/customFieldController'
    import dynamicForm from '@/components/dynamicForm'
    import editMould from '@/components/editMould'
    import excelMouldPrint from '@/components/excelMouldPrint'
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                formDataList: {
                    formGroup: [{
                            label: 'code',
                            name: '单据编号',
                            placeholder: '请输入单据编号',
                            key: 'srk'
                        },
                        {
                            label: 'createUserIds',
                            name: '创建人',
                            placeholder: '请选择',
                            key: 'sci',
                            dataUrl: {
                                url: '/user/user_list_o',
                                value: 'id'
                            }
                        },
                        {
                            label: ['createTimeStart', 'createTimeEnd'],
                            name: '创建时间',
                            key: 'cki'
                        },
                        {
                            label: 'updateUserIds',
                            name: '更新人',
                            placeholder: '请选择',
                            key: 'sci',
                            dataUrl: {
                                url: '/user/user_list_o',
                                value: 'id'
                            }
                        },
                        {
                            label: ['updateTimeStart', 'updateTimeEnd'],
                            name: '更新时间',
                            key: 'cki'
                        },
                    ],
                    searchForm: {
                        code: '',
                        createUserIds: '',
                        createTimeStart: '',
                        createTimeEnd: '',
                        updateUserIds: '',
                        updateTimeStart: '',
                        updateTimeEnd: '',
                        page: 1,
                        limit: 10
                    },
                    formSet: true
                },
                disposeGroup: [],
                tableGroup: [],
                ids:''
            }
        },
        components: {
            dynamicForm,
            editMould,
            excelMouldPrint,
            tableList
        },
        computed:{
            isBatchCheck(){
                return this.ids.length <= 0
            }
        },
        mounted() {
            this.getProductColumns({
                type: 'assembly'
            }).then(()=>{
                this.$refs.tableList.getListFn(this.formDataList.searchForm)
            })
        },
        methods: {
            getProductColumns: async function (data) {
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        const key = {
                            index: '80',
                            code:'120',
                            workOrderNum: '60',
                            endWorkerOrderNum: '90',
                            planedNum: '60',
                            finishNum: '60',
                            createTime:'150',
                            updateTime:'150',
                            createUserName:'60',
                            updateUserName:'60'
                        }
                        let width = key[item.name] ?? '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视复选框值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'assembly',
                    configureList
                }).then(() => {
                    this.$refs.tableList.updateTable()
                })
            },
             //获取勾选中表格的id
            getCheckedId(ids) {
                this.ids = ids
            },
            //点击查询获取表单数据
            getFormData(val) {
                console.log(val);
                val.page = 1;
                if (val.createUserIds) {
                    val.createUserIds = val.createUserIds.join(',')
                }
                if (val.updateUserIds) {
                    val.updateUserIds = val.updateUserIds.join(',')
                }
                this.$refs.tableList.getListFn(val)
            }
        },
    }
</script>

<style lang="less" scoped>
    .salesOrder {
        overflow: auto;
    }
</style>